<template>
    <view class="container">
        <!-- 导航栏 -->
        <view class="nav-bar fixed">
            <text class="title">舌诊记录</text>
            <text class="edit-btn" @click="toggleEdit">{{ isEditMode ? '取消' : '编辑' }}</text>
        </view>

        <!-- 占位元素 -->
        <view class="nav-placeholder"></view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="!historyList.length">
            <text class="empty-text">暂无舌诊记录</text>
        </view>

        <!-- 历史记录列表 -->
        <view class="history-list" v-else-if="!isEditMode">
            <view class="history-card" v-for="item in historyList" :key="item.id" @click="handleCardClick(item)">
                <view class="card-header">
                    <image class="tongue-image" :src="item.imageUrl" mode="aspectFill"></image>
                    <text class="time">{{ dateTimeFormat(item.createTime) }}</text>
                </view>
                
                <view class="divider"></view>

                <view class="card-content">
                    <text class="diagnosis">{{ formatComment(item.comment) }}</text>
                </view>

                <view class="view-more">
                    <text class="view-detail">查看详情 ></text>
                </view>
            </view>
        </view>

        <!-- 编辑模式 -->
        <view class="history-list" v-else>
            <checkbox-group @change="handleCheckboxChange">
                <view class="history-card" v-for="item in historyList" :key="item.id">
                    <view class="card-header">
                        <checkbox :value="item.id.toString()" :checked="selectedItems.includes(item.id.toString())" />
                        <image class="tongue-image" :src="item.imageUrl" mode="aspectFill"></image>
                        <text class="time">{{ dateTimeFormat(item.createTime) }}</text>
                    </view>

                    <view class="divider"></view>

                    <view class="card-content">
                        <text class="diagnosis">{{ formatComment(item.comment) }}</text>
                    </view>
                </view>
            </checkbox-group>
        </view>

        <!-- 编辑模式底部工具栏 -->
        <view class="edit-footer" v-if="isEditMode">
            <checkbox-group @change="handleSelectAll">
                <label class="select-all">
                    <checkbox value="all" :checked="isAllSelected" />
                    <text>全选</text>
                </label>
            </checkbox-group>
            <button class="delete-btn" @click="handleDelete">删除</button>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import { dateTimeFormat } from '@/utils/system'

const isEditMode = ref(false)
const selectedItems = ref([])
const isAllSelected = ref(false)
const historyList = ref([])

// 获取历史记录
const getHistoryList = async () => {
	uni.showLoading({
		title:"加载中"
	})
    try {
        const res = await request.get('/tongue/history')
        historyList.value = res.data
		uni.hideLoading()
    } catch (err) {
		uni.hideLoading()
        uni.showToast({
            title: err || '获取记录失败',
            icon: 'none'
        })
    }
}

// 点击卡片
const handleCardClick = (item) => {
    if (!isEditMode.value) {
        uni.navigateTo({
            url: '/pages/tongue/result',
            success: function(res) {
                res.eventChannel.emit('acceptDataFromOpenerPage', {
                    imageUrl: item.imageUrl,
                    createTime: item.createTime,
                    coatingQuality: item.coatingQuality,
                    coatingColor: item.coatingColor,
                    tongueColor: item.tongueColor,
                    tongueVitality: item.tongueVitality,
                    tongueShape: item.tongueShape
                })
            }
        })
    }
}

// 切换编辑模式
const toggleEdit = () => {
    isEditMode.value = !isEditMode.value
    if (!isEditMode.value) {
        selectedItems.value = []
        isAllSelected.value = false
    }
}

// 处理复选框变化
const handleCheckboxChange = (e) => {
    selectedItems.value = e.detail.value
    isAllSelected.value = selectedItems.value.length === historyList.value.length
}

// 全选
const handleSelectAll = (e) => {
    const isChecked = e.detail.value.includes('all')
    isAllSelected.value = isChecked
    if (isChecked) {
        selectedItems.value = historyList.value.map(item => item.id.toString())
    } else {
        selectedItems.value = []
    }
}

// 删除选中项
const handleDelete = async () => {
    if (!selectedItems.value.length) {
        uni.showToast({
            title: '请选择要删除的记录',
            icon: 'none'
        })
        return
    }

    try {
        const { confirm } = await uni.showModal({
            title: '提示',
            content: '确定要删除选中的记录吗？'
        })
        if (!confirm) {
            return
        }

        await request.post('/tongue/delete', selectedItems.value)
        
        await getHistoryList()
        isEditMode.value = false
        selectedItems.value = []

        uni.showToast({
            title: '删除成功',
            icon: 'success'
        })
    } catch (err) {
        uni.showToast({
            title: err || '删除失败',
            icon: 'none'
        })
    }
}

// 处理诊断结果文本截断
const formatComment = (text) => {
    if (text && text.length > 35) {
        return text.slice(0, 35) + '...'
    }
    return text
}

onMounted(() => {
    getHistoryList()
})
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: #f5f5f5;
    padding: 0;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background: #fff;
    border-bottom: 1rpx solid #eee;

    &.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .edit-btn {
        font-size: 28rpx;
        color: #2196F3;
    }
}

.nav-placeholder {
    height: 88rpx;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40vh;

    .empty-text {
        font-size: 28rpx;
        color: #999;
    }
}

.history-list {
    padding: 20rpx;

    .history-card {
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            :deep(uni-checkbox) {
                margin-right: 20rpx;
            }

            .tongue-image {
                width: 120rpx;
                height: 120rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .time {
                font-size: 24rpx;
                color: #999;
                margin-left: auto;
            }
        }

        .divider {
            height: 3rpx;
            background-color: #f5f5f5;
            margin: 20rpx 0;
        }

        .card-content {
            .diagnosis {
                font-size: 28rpx;
                color: #333;
                line-height: 1.5;
            }
        }

        .view-more {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .view-detail {
                font-size: 24rpx;
                color: #2196F3;
            }
        }
    }
}

.edit-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .select-all {
        display: flex;
        align-items: center;

        text {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #333;
        }
    }

    .delete-btn {
        background: #ff4d4f;
        color: #fff;
        margin-right: 10rpx;
        font-size: 28rpx;
        padding: 12rpx 40rpx;
        border-radius: 44rpx;
    }
}
</style>
